<template>
  <div style="background-color: white;box-sizing: border-box;padding: 15px 20px;width: 100%;height: 100%;box-shadow: 0 0 4px 0 lightgray;border: 1px solid #DCDFE6;">
    <el-row style="margin-bottom: 15px" type="flex" align="middle">
      <el-col :span="3">
        <b style="font-size: 20px">岗位管理</b>
      </el-col>
      <el-col :span="9" :offset="12">
        <el-row type="flex" align="middle">
          <el-col :span="9">
            <el-input
              placeholder="请输入岗位名称"
              prefix-icon="el-icon-search"
              size="medium" @keyup.enter.native="handleSearch"
              v-model="searchName">
            </el-input>
          </el-col>
          <el-col :span="15">
            <div style="display: flex; flex-direction: row; justify-content: space-around">
              <el-button type="success" icon="el-icon-plus" size="medium" @click="addPost" round>
                添加岗位
              </el-button>
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="medium" round
                         :disabled="this.selectionList.length===0" @click="handleDelete">
                批量删除
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-table :data="jobs" border tooltip-effect="dark" stripe max-height="638" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="name" label="岗位名称" width="120">
      </el-table-column>
      <el-table-column align="center" label="工人">
        <template slot-scope="scope">
          <el-tag style="margin: 5px 5px 5px 5px;"
                  v-for="job in scope.row.userList" :disable-transitions="true"
                  :key="job.workerId" type="warning"
                  size="small">
            {{ job.workerName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="任务">
        <template slot-scope="scope">
          <el-tag style="margin: 5px 5px 5px 5px;"
                  v-for="task in scope.row.jobList" :disable-transitions="true"
                  :key="task.jobId" type="warning"
                  size="small">
            {{ task.jobName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <el-button plain size="mini"
                     type="primary" icon="el-icon-edit"
                     @click="clickEditButton(scope.$index)">编辑
          </el-button>
          <el-button plain size="mini"
                     type="danger" icon="el-icon-delete"
                     @click="deleteData(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;position:absolute;left: 50px;bottom: 30px">
      <div style="display: flex;justify-content:center;">
        <el-pagination
          :page-size=pageSize
          :current-page=pageNumber
          layout="prev, pager, next"
          :total=total
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="添加岗位" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newJob" :rules="rules" ref="addJobForm">
        <el-form-item label="岗位名称" prop="name">
          <el-input v-model="newJob.name"/>
        </el-form-item>
        <el-form-item label="任务">
          <el-select v-model="newJob.tasks" multiple filterable placeholder="请选择任务">
            <el-option
              v-for="item in allTasks"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工人">
          <el-select v-model="newJob.workers" multiple filterable placeholder="请选择工人">
            <el-option
              v-for="item in allWorkers"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑岗位信息" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="tempJob" :rules="rules" ref="editJoborm">
        <el-form-item label="岗位名称" prop="name">
          <el-input v-model="tempJob.name"></el-input>
        </el-form-item>
        <el-form-item label="任务">
          <el-select v-model="tempJob.tasks" multiple filterable placeholder="请选择任务">
            <el-option
              v-for="item in allTasks"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工人">
          <el-select v-model="tempJob.workers" multiple filterable placeholder="请选择工人">
            <el-option
              v-for="item in allWorkers"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取消</el-button>
        <el-button type="primary" @click="editPost">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from "../../../Network/request";
  import {Message} from 'element-ui'
export default {
  name: "index",
  methods: {
    addPost() {
      this.allTasks = [];
      this.allWorkers = [];
      this.addDialogVisible = true;
      request({
        method: 'POST',
        url: '/job/getAll',
        data: {}
      }).then(res => {
        this.allTasks = res.data.data.list
      });
      request({
        method: 'POST',
        url: '/user/getAll',
        data: {}
      }).then(res => {
        this.allWorkers = res.data.data.list
      })
    },
    submit() {
      request({
        method: 'PUT',
        url: '/post/add',
        data: {
          name: this.newJob.name
        }
      }).then(res => {
        let postId = res.data.data;
        let idString = '';
        if (this.newJob.workers.length > 0) {
          for (var i = 0; i < this.newJob.workers.length - 1; i++) {
            idString = idString + this.newJob.workers[i] + ','
          }
          idString = idString + this.newJob.workers[this.newJob.workers.length - 1];
        }
        let joids = '';
        if (this.newJob.tasks.length > 0){
          for (var j = 0; j < this.newJob.tasks.length - 1; j++) {
            joids = joids + this.newJob.tasks[j] + ','
          }
          joids = joids + this.newJob.tasks[this.newJob.tasks.length - 1];
        }
        request({
          method: 'PUT',
          url: '/workerpost/multiUpdateAnti',
          params: {
            postid: postId,
            workerids: idString
          }
        }).then(res => {
          request({
            method: 'PUT',
            url: '/postjob/multiUpdate',
            params: {
              postid: postId,
              jobids: joids
            }
          }).then(res => {
            this.closeAddDialog();
            this.getTableData();
            this.$message({
              message: '成功添加岗位！',
              type: 'success'
            })
          })
        });
      })
      // request({
      //   method: 'PUT',
      //   url: '/workerpost/multiUpdateAnti',
      //
      // })
    },
    clickEditButton(index) {
      this.editDialogVisible = true;
      this.tempJob.workers = [];
      this.tempJob.tasks = [];
      this.currentIndex = this.jobs[index].id;
      //中间变量，以便点击提交的时候才会更新当前的数据
      this.tempJob.name = this.jobs[index].name;
      this.jobs[index].userList.forEach(item => {
        this.tempJob.workers.push(item.workerId)
      });
      this.jobs[index].jobList.forEach(item => {
        this.tempJob.tasks.push(item.jobId)
      })
      this.allTasks = [];
      this.allWorkers = [];
      request({
        method: 'POST',
        url: '/job/getAll',
        data: {}
      }).then(res => {
        this.allTasks = res.data.data.list
      });
      request({
        method: 'POST',
        url: '/user/getAll',
        data: {}
      }).then(res => {
        this.allWorkers = res.data.data.list
      })
    },
    editPost() {
      let idString = '';
      if (this.tempJob.workers.length > 0) {
        for (var i = 0; i < this.tempJob.workers.length - 1; i++) {
          idString = idString + this.tempJob.workers[i] + ','
        }
        idString = idString + this.tempJob.workers[this.tempJob.workers.length - 1];
      }
      let joids = '';
      if (this.tempJob.tasks.length > 0){
        for (var j = 0; j < this.tempJob.tasks.length - 1; j++) {
          joids = joids + this.tempJob.tasks[j] + ','
        }
        joids = joids + this.tempJob.tasks[this.tempJob.tasks.length - 1];
      }
      request({
        method: 'PUT',
        url: '/workerpost/multiUpdateAnti',
        params: {
          postid: this.currentIndex,
          workerids: idString
        }
      }).then(res => {
        request({
          method: 'PUT',
          url: '/postjob/multiUpdate',
          params: {
            postid: this.currentIndex,
            jobids: joids
          }
        }).then(res => {
          this.closeEditDialog();
          this.getTableData();
          this.$message({
            message: '成功编辑岗位！',
            type: 'success'
          })
        })
      });

    },
    closeAddDialog() {
      this.addDialogVisible = false;
      this.newJob = {
        name: '',
        workers: [],
        tasks: []
      }
    },
    closeEditDialog() {
      this.editDialogVisible = false;
      this.tempJob = {
        name: '',
        workers: [],
        tasks: []
      }
    },
    getTableData() {
      this.jobs = [];
      request({
        method: 'POST',
        url: '/post/getAllWithWJ',
        data: {
          name: this.searchName
        },
        params: {
          pageNum: this.pageNumber,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.total = res.data.data.total;
        this.jobs = res.data.data.list
      })
    },
    deleteData(index) {
      const i = index;
      const job = this.jobs[index];
      request({
        method: 'DELETE',
        url: '/post/delete',
        params: {
          ids: job.id
        }
      }).then(res => {
        this.getTableData();
        this.$message({
          message: '成功删除岗位！',
          type: "success"
        })
      })
    },
    handleSelectionChange(val) {
      this.selectionList = [];
      val.forEach(item => {
        this.selectionList.push(item.id)
      });
    },
    handleDelete() {
      let idString = '';
      for (var i = 0; i < this.selectionList.length - 1; i++) {
        idString = idString + this.selectionList[i] + ','
      }
      idString = idString + this.selectionList[this.selectionList.length - 1];
      request({
        method: 'DELETE',
        url: '/post/delete',
        params: {
          ids: idString
        }
      }).then(res => {
        this.getTableData();
        this.$message({
          message: '成功删除岗位！',
          type: 'success'
        })
      })
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getTableData()
    },
    handleSearch() {
      this.pageNumber = 1;
      this.getTableData()
    }
  },

  mounted() {
    this.getTableData()
  },
  data(){
    return {
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      editDialogVisible: false,
      addDialogVisible: false,
      selectionList: [],
      searchName: '',
      currentIndex: 0,
      allTasks: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7', '任务8', '任务9', '任务10', '任务11', '任务12', '任务13', '任务14', '任务15', '任务16'],
      allWorkers: ['工人1', '工人2', '工人3', '工人4', '工人5', '工人6', '工人7', '工人8', '工人9', '工人10'],
      newJob: {
        name: '',
        workers: [],
        tasks: []
      },
      tempJob: {
        name: '',
        workers: [],
        tasks: []
      },
      rules: {
        name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ]
      },
      jobs: [
        {
          name: '岗位1',
          workers: ['工人1','工人2','工人4','工人5'],
          tasks: ['任务1', '任务2', '任务4']
        },
        {
          name: '岗位2',
          workers: ['工人1','工人2','工人4'],
          tasks: ['任务1', '任务2', '任务4', '任务5']
        },
        {
          name: '岗位3',
          workers: ['工人1','工人2','工人4','工人5'],
          tasks: ['任务1', '任务2', '任务4']
        },
        {
          name: '岗位5',
          workers: ['工人1','工人2','工人4','工人5'],
          tasks: ['任务1', '任务2', '任务4']
        },
        {
          name: '岗位4',
          workers: ['工人1','工人2','工人4','工人5'],
          tasks: ['任务1', '任务2', '任务4']
        },
      ]
    }
  }
}
</script>

<style scoped>
  .el-card >>> .el-card__header{
    padding: 0;
  }
</style>
